<!-- 列表页分类 -->
<template>
  <div class="header_list">

    <div class="list_content">
      <input type="text" class="input_text" v-model="courseName" placeholder="请输入搜索内容">
      <input type="submit" value="搜索" @click="searchCourseName()" class="input_sub">
    </div>

    <div class="list_content">
      <ul class="content_ul clearfix">
        <li @click="changeOne([], -1, '')"><a href="javascript:">全部</a></li>
        <li v-for="(item, index) in classList" :key="index" @click="changeOne(item.twoList, index, item.id)"><a
          href="javascript:">{{item.categoryName}}</a></li>
      </ul>
    </div>
    <div class="list_content" v-if="twoList.length">
      <ul class="content_ul clearfix">
        <li @click="changeTwo([], -1, '')"><a href="javascript:">全部</a></li>
        <li v-for="(two, index) in twoList" :key="index" @click="changeTwo(two.threeList, index, two.id)"><a
          href="javascript:">{{two.categoryName}}</a></li>
      </ul>
    </div>
    <div class="list_content" v-if="threeList.length">
      <ul class="content_ul clearfix">
        <li @click="changeThree(-1, '')"><a href="javascript:">全部</a></li>
        <li @click="changeThree(index, three.id)" v-for="(three, index) in threeList" :key="index"><a
          href="javascript:">{{three.categoryName}}</a></li>
      </ul>
    </div>
    <!--<div class="list_content">-->
    <!--<ul class="content_ul clearfix">-->
    <!--<li @click="changeFour(3)"><a href="javascript:">搜索框</a></li>-->
    <!--<li @click="changeFour(2)"><a href="javascript:">不公开</a></li>-->
    <!--<li @click="changeFour(1)"><a href="javascript:">公开</a></li>-->
    <!--</ul>-->
    <!--</div>-->
  </div>
</template>
<script>
  import {courseClass} from '~/api/course.js'

  export default {
  props: {
    courseType: {
      default: 'course'
    },
    classList: {
      type: [Array, Object],
      default () {
        return []
      }
    }
  },
  data () {
    return {
      webInfo: this.$store.state.webInfo,
      twoList: [],
      threeList: [],
      courseName: '',
      categoryObj: {
        categoryNo1: '',
        categoryNo2: '',
        categoryNo3: '',
        isFree: '1'
      }
    }
  },
  methods: {
    changeOne (twoList, oneNow, categoryNo1) {
      if (twoList) {
        this.twoList = twoList
      } else {
        this.twoList = []
      }
      this.categoryObj.categoryNo2 = ''
      this.categoryObj.categoryNo3 = ''
      this.threeList = []
      this.categoryObj.categoryNo1 = categoryNo1
      this.courseName = ''
      this.goCourseList()
    },
    changeTwo (threeList, twoNow, categoryNo2) {
      if (threeList) {
        this.threeList = threeList
      } else {
        this.threeList = []
      }
      this.categoryObj.categoryNo3 = ''
      this.categoryObj.categoryNo2 = categoryNo2
      this.courseName = ''
      this.goCourseList()
    },
    changeThree (threeNow, categoryNo3) {
      this.categoryObj.categoryNo3 = categoryNo3
      this.courseName = ''
      this.goCourseList()
    },
    // changeFour (fourNow) {
    //   this.goCourseList()
    // },
    searchCourseName(fourNow) {
      //alert(this.courseName);
      this.$router.push({
        name: 'list',
        query: {
          categoryno1: '',
          categoryno2: '',
          categoryno3: '',
          four: '',
          courseName: this.courseName
        }
      })
      this.goCourseList()
    },
    goCourseList () {
      let that = this
      let categoryObj1 = this.categoryObj
      this.$router.push({
        name: 'list',
        query: {
          categoryno1: categoryObj1.categoryNo1,
          categoryno2: categoryObj1.categoryNo2,
          categoryno3: categoryObj1.categoryNo3,
          four: '',
          courseName: this.courseName
        }
      })
    },
    getNextClass () {
      if (this.$route.query.categoryno1) {
        for (let i = 0; i < this.classList.length; i++) {
          if (this.classList[i].id === this.$route.query.categoryno1) {
            if (this.classList[i].twoList) {
              this.twoList = this.classList[i].twoList
              this.getThreeClass()
            }
          }
        }
      }
    },
    getThreeClass () {
      if (this.$route.query.categoryno2) {
        for (let i = 0; i < this.twoList.length; i++) {
          if (this.twoList[i].id === this.$route.query.categoryno2) {
            if (this.twoList[i].threeList) {
              this.threeList = this.twoList[i].threeList
              if (this.$route.query.categoryno3) {
              }
            }
          }
        }
      }
    }
  },
  mounted () {
    if (this.$route.query.categoryno1 || this.$route.query.categoryno1 === '') {
      this.categoryObj.categoryNo1 = this.$route.query.categoryno1
    }
    if (this.$route.query.categoryno2 || this.$route.query.categoryno2 === '') {
      this.categoryObj.categoryNo2 = this.$route.query.categoryno2
    }
    if (this.$route.query.categoryno3 || this.$route.query.categoryno3 === '') {
      this.categoryObj.categoryNo3 = this.$route.query.categoryno3
    }
    if (this.$route.query.four) {
      this.fourNow1 = this.$route.query.four
    }
    this.getNextClass()
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  /*左边输入框设置样式*/
  .input_text {
    width: 80%;
    height: 40px;
    border: 1px solid green;
    /*清除掉默认的padding*/
    padding: 0px;

    /*提示字首行缩进*/
    text-indent: 10px;

    /*去掉蓝色高亮框*/
    outline: none;

    /*用浮动解决内联元素错位及小间距的问题*/
    float: left;
  }

  .input_sub {
    width: 100px;
    height: 42px;
    background: green;

    /*去掉submit按钮默认边框*/
    border: 0px;
    /*改成右浮动也是可以的*/
    float: left;
    color: white; /*搜索的字体颜色为白色*/
    cursor: pointer; /*鼠标变为小手*/
  }
  .header_list {
    border-top: 1px solid rgb(215, 215, 215);
    background: #fff;
    .list_content {
      width: 1200px;
      margin: 0 auto;
      height: 73px;
      border-bottom: 1px solid rgb(215, 215, 215);
      position: relative;
      &:last-child {
        border-bottom: none;
      }
      span {
        position: absolute;
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        height: 26px;
        line-height: 26px;
        top: 23px;
      }
    }
  }
  .content_ul {
    display: inline-block;
    // margin-left: 60px;
    margin-top: 23px;
    li {
      float: left;
      font-size: 14px;
      height: 26px;
      line-height: 26px;
      padding: 0 6px;
      border-radius: 6px;
      margin: 0 6px;
      a:hover {
        color: red;
        text-decoration: none;
      }
      &.now {
        background: rgb(51, 51, 51);
        a {
          color: #fff;
        }
      }
    }
  }
</style>
